<template>
  <div class="user-orders">
    <!-- 标题区域 -->
    <div class="my-order">我的订单</div>

    <!-- 标签和搜索区域容器 -->
    <div class="tab-search-container">
      <!-- 标签栏 -->
      <div class="tab-container">
        <ul class="tab-list">
          <li
            :class="{ active: currentTab === tab.value }"
            @click="currentTab = tab.value"
            v-for="tab in tabs"
            :key="tab.value"
          >
            {{ tab.label }}
            <span class="badge" v-if="tab.badge && currentTab === tab.value">{{ tab.badge }}</span>
          </li>
        </ul>
      </div>

      <!-- 搜索和高级筛选区域 -->
      <div class="search-area">
        <input
          type="text"
          placeholder="商品名称/商品编号/订单号"
          class="search-input"
          v-model="searchQuery"
        >
        <button class="search-btn" @click="handleSearch">搜索</button>
        <div class="advanced-filter" @click="toggleAdvancedFilter">
          高级
          <i class="arrow-icon">{{ advancedFilterOpen ? '▲' : '▼' }}</i>
        </div>
      </div>

      <!-- 高级筛选区域 (默认隐藏) -->
      <div class="advanced-filter-content" v-if="advancedFilterOpen">
        <div class="filter-item">
          <label>订单状态:</label>
          <select v-model="filterStatus">
            <option value="">全部状态</option>
            <option value="unpaid">待付款</option>
            <option value="shipped">已发货</option>
            <option value="completed">已完成</option>
            <option value="cancelled">已取消</option>
          </select>
        </div>
        <div class="filter-item">
          <label>时间范围:</label>
          <input type="date" v-model="startDate">
          <span>至</span>
          <input type="date" v-model="endDate">
        </div>
        <button class="filter-btn" @click="applyFilter">应用筛选</button>
        <button class="reset-btn" @click="resetFilter">重置</button>
      </div>
    </div>

    <!-- 订单列表区域 -->
    <div class="order-list-header">
      <div class="header-item">近三个月订单</div>
      <div class="header-item">订单详情</div>
      <div class="header-item">收货人</div>
      <div class="header-item">金额</div>
      <div class="header-item">全部状态</div>
      <div class="header-item">操作</div>
    </div>
    <div
      class="order-item"
       v-for="order in paginatedOrders"
      :key="order.id"
    >
      <div class="order-info">
        <span class="order-time">{{ order.time }}</span>
        <span class="order-id">订单号：{{ order.id }}</span>
        <span class="platform">{{ order.platform }}</span>
      </div>

      <div class="product-info">
        <img
          :src="order.product.imgUrl"
          :alt="order.product.name"
          class="product-img"
        >
        <div class="product-desc">
          <p>{{ order.product.name }}</p>
          <span>×{{ order.product.quantity }}</span>
        </div>
      </div>

      <div class="after-sales" v-if="order.canAfterSales">
        <button class="after-sales-btn" @click="handleAfterSales(order.id)">申请售后</button>
      </div>
      <div class="after-sales" v-else>-</div>

      <div class="consignee">{{ order.consignee }}</div>

      <div class="amount">
        <p>¥{{ order.amount.toFixed(2) }}</p>
        <span>{{ order.paymentMethod }}</span>
      </div>

      <div class="status">
        <p :class="`status-tag ${order.statusClass}`">{{ order.statusText }}</p>
        <span class="detail-link" @click="viewOrderDetail(order.id)">订单详情</span>
      </div>

      <div class="operation">
        <button
          class="oper-btn"
          v-for="(action, index) in order.actions"
          :key="index"
          :class="action.class"
          @click="handleOrderAction(order.id, action.type)"
        >
          {{ action.name }}
        </button>
      </div>
    </div>

    <!-- 空状态显示 -->
    <div class="empty-state" v-if="filteredOrders.length === 0">
      <img src="https://picsum.photos/100/100" alt="暂无订单" class="empty-img">
      <p>暂无相关订单</p>
      <button class="go-shopping" @click="goShopping">去购物</button>
    </div>

    <!-- 分页区域 -->
    <div class="pagination" v-if="filteredOrders.length > 0">
      <button
        class="page-btn"
        @click="currentPage = Math.max(1, currentPage - 1)"
        :disabled="currentPage === 1"
      >
        上一页
      </button>

      <span
        class="page-number"
        v-for="page in pageNumbers"
        :key="page"
        :class="{ active: currentPage === page }"
        @click="currentPage = page"
      >
        {{ page }}
      </span>

      <button
        class="page-btn"
        @click="currentPage = Math.min(totalPages, currentPage + 1)"
        :disabled="currentPage === totalPages"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 标签数据
const tabs = [
  { value: 'all', label: '全部订单', badge: 0 },
  { value: 'unpaid', label: '待付款', badge: 2 },
  { value: 'unreceived', label: '待收货/使用', badge: 1 },
  { value: 'uncomment', label: '待评价', badge: 1 },
  { value: 'recycle', label: '订单回收站', badge: 0 }
];

// 响应式数据
const currentTab = ref('all');
const searchQuery = ref('');
const advancedFilterOpen = ref(false);
const filterStatus = ref('');
const startDate = ref('');
const endDate = ref('');
const currentPage = ref(1);
const pageSize = ref(3); // 每页显示3条

// 模拟订单数据
const orders = ref([
  {
    id: '329810392047',
    time: '2025-07-27 15:37:58',
    platform: '京东',
    product: {
      name: '回力（Warrior）纯棉t恤男夏季新款重磅运动上衣男士潮流短袖宽松体恤 白色 L',
      imgUrl: 'https://img14.360buyimg.com/n1/jfs/t1/206733/33/35033/105773/64c39c3dF99999999/9999999999999999.jpg',
      quantity: 1
    },
    consignee: '陌上倾',
    amount: 40.90,
    paymentMethod: '在线支付',
    statusText: '已完成',
    statusClass: 'completed',
    canAfterSales: true,
    actions: [
      { name: '查看发票', type: 'invoice', class: '' },
      { name: '评价晒单', type: 'comment', class: '' },
      { name: '立即购买', type: 'rebuy', class: 'buy-again' }
    ]
  },
  {
    id: '329810392048',
    time: '2025-07-25 10:15:22',
    platform: '淘宝',
    product: {
      name: 'Apple iPhone 15 Pro 256GB 黑色钛金属 移动联通电信5G手机',
      imgUrl: 'https://picsum.photos/seed/iphone/200/200',
      quantity: 1
    },
    consignee: '张三',
    amount: 8999.00,
    paymentMethod: '支付宝',
    statusText: '待收货',
    statusClass: 'shipping',
    canAfterSales: false,
    actions: [
      { name: '查看物流', type: 'logistics', class: '' },
      { name: '确认收货', type: 'confirm', class: 'buy-again' }
    ]
  },
  {
    id: '329810392049',
    time: '2025-07-20 09:42:15',
    platform: '拼多多',
    product: {
      name: '小米14 徕卡光学镜头 骁龙8 Gen3 超窄边屏幕 12GB+256GB 黑色 5G手机',
      imgUrl: 'https://picsum.photos/seed/xiaomi/200/200',
      quantity: 1
    },
    consignee: '李四',
    amount: 4299.00,
    paymentMethod: '微信支付',
    statusText: '待付款',
    statusClass: 'unpaid',
    canAfterSales: false,
    actions: [
      { name: '立即付款', type: 'pay', class: 'buy-again' },
      { name: '取消订单', type: 'cancel', class: '' }
    ]
  },
  {
    id: '329810392050',
    time: '2025-07-15 16:30:45',
    platform: '京东',
    product: {
      name: '华为平板MatePad Pro 11英寸 2024款 12.6英寸全面屏二合一平板笔记本',
      imgUrl: 'https://picsum.photos/seed/huawei/200/200',
      quantity: 1
    },
    consignee: '王五',
    amount: 3799.00,
    paymentMethod: '在线支付',
    statusText: '已完成',
    statusClass: 'completed',
    canAfterSales: true,
    actions: [
      { name: '查看发票', type: 'invoice', class: '' },
      { name: '评价晒单', type: 'comment', class: '' },
      { name: '立即购买', type: 'rebuy', class: 'buy-again' }
    ]
  },
  {
    id: '329810392051',
    time: '2025-07-10 11:20:30',
    platform: '淘宝',
    product: {
      name: '耐克 Nike Air Max 270 男子运动鞋 透气缓震跑步鞋',
      imgUrl: 'https://picsum.photos/seed/nike/200/200',
      quantity: 2
    },
    consignee: '赵六',
    amount: 1299.00,
    paymentMethod: '支付宝',
    statusText: '待评价',
    statusClass: 'uncomment',
    canAfterSales: true,
    actions: [
      { name: '评价晒单', type: 'comment', class: 'buy-again' },
      { name: '申请售后', type: 'aftersales', class: '' }
    ]
  }
]);

// 筛选订单
const filteredOrders = computed(() => {
  return orders.value.filter(order => {
    // 标签筛选
    if (currentTab.value === 'unpaid' && order.statusText !== '待付款') return false;
    if (currentTab.value === 'unreceived' && !['待收货', '已发货'].includes(order.statusText)) return false;
    if (currentTab.value === 'uncomment' && order.statusText !== '待评价') return false;
    if (currentTab.value === 'recycle') return false; // 假设回收站没有数据

    // 搜索筛选
    if (searchQuery.value && !order.product.name.includes(searchQuery.value) &&
        !order.id.includes(searchQuery.value)) return false;

    // 状态筛选
    if (filterStatus.value) {
      if (filterStatus.value === 'unpaid' && order.statusText !== '待付款') return false;
      if (filterStatus.value === 'shipped' && !['待收货', '已发货'].includes(order.statusText)) return false;
      if (filterStatus.value === 'completed' && order.statusText !== '已完成') return false;
      if (filterStatus.value === 'cancelled' && order.statusText !== '已取消') return false;
    }

    // 日期筛选（简化处理）
    if (startDate.value && new Date(order.time) < new Date(startDate.value)) return false;
    if (endDate.value && new Date(order.time) > new Date(endDate.value)) return false;

    return true;
  });
});

// 分页处理
const totalPages = computed(() => {
  return Math.ceil(filteredOrders.value.length / pageSize.value);
});

const paginatedOrders = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  return filteredOrders.value.slice(startIndex, startIndex + pageSize.value);
});

// 生成页码数组
const pageNumbers = computed(() => {
  return Array.from({ length: totalPages.value }, (_, i) => i + 1);
});

// 方法
const handleSearch = () => {
  currentPage.value = 1; // 搜索后重置到第一页
  console.log('搜索:', searchQuery.value);
};

const toggleAdvancedFilter = () => {
  advancedFilterOpen.value = !advancedFilterOpen.value;
};

const applyFilter = () => {
  currentPage.value = 1; // 筛选后重置到第一页
  console.log('应用筛选', { filterStatus: filterStatus.value, startDate: startDate.value, endDate: endDate.value });
};

const resetFilter = () => {
  filterStatus.value = '';
  startDate.value = '';
  endDate.value = '';
  currentPage.value = 1;
};

const handleAfterSales = (orderId) => {
  console.log('申请售后:', orderId);
};

const viewOrderDetail = (orderId) => {
  console.log('查看订单详情:', orderId);
};

const handleOrderAction = (orderId, actionType) => {
  console.log(`订单 ${orderId} 执行操作:`, actionType);
  // 可以根据不同的actionType执行不同的操作
};

const goShopping = () => {
  console.log('跳转到购物页面');
};
</script>

<style scoped lang="scss">
.user-orders {
  background-color: #fff;
  padding: 20px;
  min-height: 600px;

  // 标题样式
  .my-order {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  // 标签和搜索区域整体容器
  .tab-search-container {
    margin-bottom: 15px;

    // 标签栏样式
    .tab-container {
      margin-bottom: 15px;
      .tab-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;

        li {
          margin-right: 15px;
          margin-bottom: 10px;
          cursor: pointer;
          padding: 5px 10px;
          border-radius: 4px;
          transition: all 0.2s;

          &:hover {
            background-color: #f5f5f5;
          }

          &.active {
            background-color: #ff4d4f;
            color: #fff;
          }

          .badge {
            background-color: #fff;
            color: #ff4d4f;
            font-size: 12px;
            padding: 0 6px;
            border-radius: 10px;
            margin-left: 5px;
          }
        }
      }
    }

    // 搜索区域样式
    .search-area {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .search-input {
        height: 32px;
        border: 1px solid #ccc;
        border-radius: 4px 0 0 4px;
        padding: 0 10px;
        outline: none;
        width: 300px;

        &:focus {
          border-color: #ff4d4f;
        }
      }

      .search-btn {
        height: 34px;
        border: 1px solid #ff4d4f;
        background-color: #ff4d4f;
        color: white;
        cursor: pointer;
        border-radius: 0 4px 4px 0;
        padding: 0 15px;

        &:hover {
          background-color: #f5222d;
        }
      }

      .advanced-filter {
        margin-left: 10px;
        cursor: pointer;
        color: #666;
        font-size: 14px;

        .arrow-icon {
          font-size: 12px;
          margin-left: 5px;
          transition: transform 0.2s;
        }
      }
    }

    // 高级筛选内容
    .advanced-filter-content {
      padding: 15px;
      background-color: #f9f9f9;
      border-radius: 4px;
      margin-bottom: 15px;

      .filter-item {
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 10px;

        label {
          display: inline-block;
          margin-right: 5px;
          color: #666;
        }

        select, input {
          padding: 5px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
      }

      .filter-btn {
        background-color: #ff4d4f;
        color: white;
        border: none;
        padding: 6px 15px;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 10px;
      }

      .reset-btn {
        background-color: #fff;
        color: #666;
        border: 1px solid #ccc;
        padding: 5px 15px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }

  // 订单列表表头样式
  .order-list-header {
    display: flex;
    background-color: #f5f5f5;
    border: 1px solid #eee;
    margin-bottom: 10px;

    .header-item {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      border-right: 1px solid #eee;
      font-weight: 500;
      color: #333;

      &:first-child {
        flex: 0.8;
      }

      &:nth-child(2) {
        flex: 1.5;
      }

      &:last-child {
        border-right: none;
      }
    }
  }

  // 单个订单项样式
  .order-item {
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    transition: box-shadow 0.2s;

    &:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .order-info {
      flex: 0.8;
      padding-right: 10px;

      .order-time,
      .order-id,
      .platform {
        display: block;
        margin-bottom: 5px;
        font-size: 13px;
        color: #666;
      }

      .platform {
        color: #ff4d4f;
      }
    }

    .product-info {
      flex: 1.5;
      display: flex;
      align-items: center;

      .product-img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        margin-right: 10px;
        border: 1px solid #eee;
      }

      .product-desc {
        flex: 1;

        p {
          margin: 0 0 5px 0;
          font-size: 14px;
          color: #333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        span {
          color: #666;
          font-size: 13px;
        }
      }
    }

    .after-sales,
    .consignee,
    .amount,
    .status,
    .operation {
      flex: 1;
      text-align: center;
    }

    .after-sales-btn {
      color: #ff4d4f;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 5px 0;
      font-size: 14px;
    }

    .consignee {
      color: #333;
      font-size: 14px;
    }

    .amount {
      p {
        margin: 0 0 5px 0;
        color: #ff4d4f;
        font-weight: 500;
      }

      span {
        font-size: 13px;
        color: #666;
      }
    }

    .status {
      .status-tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 13px;
        margin-bottom: 5px;

        &.completed {
          background-color: #f6ffed;
          color: #52c41a;
          border: 1px solid #b7eb8f;
        }

        &.shipping {
          background-color: #fff7e6;
          color: #fa8c16;
          border: 1px solid #ffd591;
        }

        &.unpaid {
          background-color: #fff1f0;
          color: #ff4d4f;
          border: 1px solid #ffccc7;
        }

        &.uncomment {
          background-color: #e6f7ff;
          color: #1890ff;
          border: 1px solid #91d5ff;
        }
      }

      .detail-link {
        color: #1890ff;
        font-size: 13px;
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .operation {
      .oper-btn {
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 5px 10px;
        cursor: pointer;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fff;
        font-size: 13px;
        transition: all 0.2s;

        &:hover {
          border-color: #ff4d4f;
          color: #ff4d4f;
        }

        &.buy-again {
          background-color: #ff4d4f;
          color: #fff;
          border-color: #ff4d4f;

          &:hover {
            background-color: #f5222d;
          }
        }
      }
    }
  }

  // 空状态样式
  .empty-state {
    text-align: center;
    padding: 50px 0;
    color: #999;

    .empty-img {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      opacity: 0.5;
    }

    p {
      margin-bottom: 20px;
      font-size: 14px;
    }

    .go-shopping {
      background-color: #ff4d4f;
      color: white;
      border: none;
      padding: 8px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;

      &:hover {
        background-color: #f5222d;
      }
    }
  }

  // 分页样式
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;

    .page-btn {
      padding: 5px 15px;
      margin: 0 5px;
      border: 1px solid #ddd;
      background-color: #fff;
      cursor: pointer;
      border-radius: 4px;
      font-size: 14px;

      &:hover {
        border-color: #ff4d4f;
        color: #ff4d4f;
      }

      &:disabled {
        cursor: not-allowed;
        color: #999;
        border-color: #ddd;
        background-color: #f5f5f5;

        &:hover {
          color: #999;
          border-color: #ddd;
        }
      }
    }

    .page-number {
      margin: 0 5px;
      padding: 5px 10px;
      cursor: pointer;
      border-radius: 4px;
      font-size: 14px;

      &.active {
        background-color: #ff4d4f;
        color: white;
      }

      &:hover:not(.active) {
        color: #ff4d4f;
      }
    }
  }
}
</style>
